<style lang="less" scoped>
  .page__wrapper {
    width: 100%;
    height: 100%;
  }
</style>

<template>
  <div class="page__wrapper">
    <simple-table :table-column="tableColumn" :table-data="tableData" :table-page-info="tablePageInfo" :table-data-count="tableDataTotalCount" @page-info-change="handlePageInfoChange">
      <template slot="searchSection">
        <simple-form v-model="searchModel" :form-field="searchFormField">
          <template slot="tableOperation">
            <el-button v-if="actionList.indexOf('add') >= 0" type="primary" @click="handleAddClick">{{$t('operation.create')}}</el-button>
          </template>
        </simple-form>
      </template>
      <template slot-scope="scope" slot="status">
        {{$getDictLabel({type: 'data_status', value: scope.row.status})}}
      </template>
      <template slot="operation" slot-scope="scope">
        <el-button v-if="actionList.indexOf('edit') >= 0" circle icon="el-icon-edit" :title="$t('operation.edit')" @click="handleEditClick(scope.row)"></el-button>
        <el-button v-if="actionList.indexOf('auth') >= 0" @click="authorization(scope.row)" circle icon="el-icon-setting" :title="$t('operation.authorization')"></el-button>
        <el-button v-if="actionList.indexOf('del') >= 0" @click="deleteRecord(scope.row)" circle icon="el-icon-delete" :title="$t('operation.delete')"></el-button>
      </template>
    </simple-table>
    <detail-dialog :show-flag.sync="isShowDetailDialog" :detail-data="rowData" :view-flag="isViewFlag" :ext-data="{sys_mid}"></detail-dialog>
    <authorization-dialog :show-flag.sync="isShowAuthorizationDialog" :detail-data="rowData" :view-flag="isViewFlag" :ext-data="{sys_mid}"></authorization-dialog>
  </div>
</template>
<script>
/** 混入分页信息及数据总数信息 */
import pageMixins from '@/components/base/simple-table/page-mixins'
import detailDialog from './detail'
import authorizationDialog from './authorization-dialog'
const BASEURL = {
  list: '/Web/SysAdmin/ajax.html?sys_method=GetList&sys_objName=Sys_Role&sys_tableName=Sys_Role',
  delete: '/Web/SysAdmin/ajax.html?sys_method=Delete&sys_objName=Sys_Role',
  getInitConfig: '/Web/SysAdmin/ajax.html?sys_method=GetInitConfig'
}
export default {
  name: 'sys_role',
  mixins: [pageMixins],
  components: { detailDialog, authorizationDialog },
  data () {
    return {
      searchModel: {},
      /** 表格数据 */
      tableData: [],
      rowData: {},
      /** 是否显示详情页 dialog */
      isShowDetailDialog: false,
      /** 是否为查看数据 */
      isViewFlag: false,

      isShowAuthorizationDialog: false,
      actionList: [],
      sys_mid: ''
    }
  },
  computed: {
    searchFormField () {
      return [
        { slotName: 'tableOperation', col: { xs: 24, sm: 24, md: 24, style: { textAlign: 'right' } }, labelWidth: '0' }
      ]
    },
    tableColumn () {
      return [
        { label: this.$t('system_role.name'), prop: 'rolename', width: 200 },
        { label: this.$t('system_role.remarks'), prop: 'notes' },

        { label: this.$t('field.operation'), slotName: 'operation', width: 105, fixed: 'right' }
      ]
    }
  },
  /**
   * 注入到子组件
   */
  provide () {
    return { handleDataSearch: this.handleDataSearch }
  },
  methods: {
    handleDataSearch () {
      // 部门类型数据
      let params = Object.assign({}, this.tablePageInfo, { sys_mid: this.sys_mid, sort: 'roleid', order: 'desc' })
      let loadingFlag = this.$loading({ fullscreen: false, target: this.$el, text: this.$t('tip.systemLoading') })
      this.$axios
        .post(BASEURL.list, params)
        .then(resp => {
          let respData = resp.rows
          this.tableData = respData
          this.tableDataTotalCount = resp.total
        })
        .finally(() => {
          loadingFlag.close()
        })
    },
    getInitConfig () {
      this.$axios.post(BASEURL.getInitConfig)
        .then(resp => {
          this.actionList = resp.actionKeys.split(',')
          this.sys_mid = resp.mid
          this.handleDataSearch()
        })
    },
    handleAddClick () {
      this.rowData = {}
      this.isViewFlag = false
      this.isShowDetailDialog = true
    },
    handleViewClick (row) {
      this.rowData = this.$_.cloneDeep(row)
      this.isViewFlag = true
      this.isShowDetailDialog = true
    },
    handleEditClick (row) {
      this.rowData = this.$_.cloneDeep(row)
      this.isViewFlag = false
      this.isShowDetailDialog = true
    },
    deleteRecord (row) {
      this.$msgbox({
        title: this.$t('tip.warning'),
        message: this.$t('tip.confirmDelete'),
        type: 'warning',
        showCancelButton: true,
        closeOnClickModal: false,
        closeOnPressEscape: false,
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            instance.confirmButtonLoading = true
            this.$axios
              .post(BASEURL.delete, { id: row.roleid, idField: 'roleid', sys_mid: this.sys_mid })
              .then(resp => {
                this.$message({ type: 'success', message: this.$t('tip.deleteSuccess') })
                done()
              })
              .finally(() => {
                instance.confirmButtonLoading = false
              })
          } else done()
        }
      })
        .then(() => {
          /** 如果本页面中只有一条数据 */
          /** 手动触发 simple-table 组件中的 watch，从而调用 mixins 中的请求数据方法 */
          if (this.tableData.length === 1) {
            this.tablePageInfo.page--
          } else {
            this.handleDataSearch()
          }
        })
    },
    authorization (row) {
      this.rowData = this.$_.cloneDeep(row)
      this.isViewFlag = true
      this.isShowAuthorizationDialog = true
    }
  },
  mounted () {
    this.getInitConfig()
  }
}
</script>
